<template>
  <view class="screen-box">
    <view class="screen">
      <block v-if="activeTab == '1' || activeTab == '2'">
        <view class="flex-column-center" @click="
          showType = 'area';
        overlay_show = true;
        "><text class="mr-12 fs-30" :class="{ 'text-active': overlay_show && showType == 'area' }">区域</text>
          <block>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="overlay_show && showType == 'area'">
            </image>
            <image src="/static/svg/arrow-down.svg" class="w-20 h-12" v-else></image>
          </block>
        </view>
      </block>
      <block v-if="activeTab == '3'">
        <view class="flex-column-center" @click="
          showType = 'cate';
        overlay_show = true;
        "><text class="mr-12 fs-30" :class="{ 'text-active': overlay_show && showType == 'cate' }">分类</text>
          <block>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="overlay_show && showType == 'cate'">
            </image>
            <image src="/static/svg/arrow-down.svg" class="w-20 h-12" v-else></image>
          </block>
        </view>
      </block>
      <block v-if="activeTab == '1' || activeTab == '2'">
        <view class="flex-column-center" @click="handleSort('distance')">
          <text class="mr-12 fs-30" :class="{ 'text-active': distanceSort !== '' }">距离</text>
          <view class="price-arrows">
            <image src="/static/svg/arrow-up-active.svg" class="w-20 h-12" v-if="distanceSort === 'asc'"></image>
            <image src="/static/svg/arrow-up.svg" class="w-20 h-12" v-else style="width: 20rpx; height: 12rpx;"></image>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="distanceSort === 'desc'"></image>
            <image src="/static/svg/arrow-down2.svg" class="w-20 h-12" v-else></image>
          </view>
        </view>

        <view class="flex-column-center" @click="handleSort('views')">
          <text class="mr-12 fs-30" :class="{ 'text-active': viewsSort !== '' }">浏览量</text>
          <view class="price-arrows">
            <image src="/static/svg/arrow-up-active.svg" class="w-20 h-12" v-if="viewsSort === 'asc'"></image>
            <image src="/static/svg/arrow-up.svg" class="w-20 h-12" v-else></image>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="viewsSort === 'desc'"></image>
            <image src="/static/svg/arrow-down2.svg" class="w-20 h-12" v-else></image>
          </view>
        </view>
      </block>
      <block v-if="activeTab == '3'">
        <view class="flex-column-center" @click="
          showType = 'brand';
        overlay_show = true;
        "><text class="mr-12 fs-30" :class="{ 'text-active': overlay_show && showType == 'brand' }">品牌</text>
          <block>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="overlay_show && showType == 'brand'">
            </image>
            <image src="/static/svg/arrow-down.svg" class="w-20 h-12" v-else></image>
          </block>
        </view>
      </block>
      <block v-if="activeTab == '3'">
        <view class="flex-column-center" @click="handleSort('price')">
          <text class="mr-12 fs-30" :class="{ 'text-active': priceSort !== '' }">价格</text>
          <view class="price-arrows">
            <image src="/static/svg/arrow-up-active.svg" class="w-20 h-12" v-if="priceSort === 'asc'"></image>
            <image src="/static/svg/arrow-up.svg" class="w-20 h-12" v-else></image>
            <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="priceSort === 'desc'"></image>
            <image src="/static/svg/arrow-down2.svg" class="w-20 h-12" v-else></image>
          </view>
        </view>
      </block>
      <block v-if="activeTab == '3'">
        <view class="flex-column-center" @click="
          showType = 'more';
        overlay_show = true;
        "><text class="fs-30 mr-12" :class="{ 'text-active': overlay_show && showType == 'more' }">筛选</text>
          <block>
            <image src="/static/svg/shaixuan.svg" class="w-24 h-24" v-if="overlay_show && showType == 'more'"></image>
            <image src="/static/svg/shaixuan-hui.svg" class="w-24 h-24" v-else></image>
          </block>
        </view>
      </block>
    </view>
    <view class="popup" v-if="overlay_show">
      <ProvincesScreen v-if="showType === 'area'" :list="areaData" :checkIds="areaCheckIds"
        @changeCheck="areaChangeCheck">
      </ProvincesScreen>
      <CateScreen v-if="showType === 'cate'" :list="cateList" :checkIds="cateCheckIds" @changeCheck="cateChangeCheck">
      </CateScreen>
      <BrandScreen v-if="showType === 'brand'" :cate="cate" :list="brandList" :checkIds="brandCheckIds"
        @changeCheck="brandChangeCheck"></BrandScreen>
      <MoreScreen v-if="showType === 'more'" :cate="cate" :list="moreList" :alcohol_id="alcohol_id" :aroma_id="aroma_id"
        :volume_id="volume_id" :pack_id="pack_id" @changeCheck="moreChangeCheck"></MoreScreen>
      <view class="popup-btns">
        <u-button :customStyle="btnStyle" @click="onReast">重置</u-button>
        <u-button :customStyle="{ ...btnStyle, background: '#C5261D', color: '#fff' }" @click="onSubmit">确定</u-button>
      </view>
    </view>
  </view>
</template>
<script>
import PriceScreen from "./PriceScreen";
import BrandScreen from "./BrandScreen";
import CateScreen from "./CateScreen";
import MoreScreen from "./MoreScreen";
import ProvincesScreen from "@/components/ProvincesScreen.vue";
import { areaListApi, thingListApi } from "@/services/common";
export default {
  data() {
    return {
      showType: "area",
      overlay_show: false,
      btnStyle: {
        width: "328rpx",
        height: "80rpx",
        borderRadius: "12rpx",
        background: "#F7F8FA",
        border: "none",
      },
      areaData: [],
      areaCheckIds: [],
      cateCheckIds: [],
      brandCheckIds: [],
      brandList: [],
      cateList: [],
      priceCheckIds: [],
      moreList: [],
      alcohol_id: [], //酒精度
      aroma_id: [], //香型
      volume_id: [], //净含量
      pack_id: [], //包装形式
      priceSort: "", // '' = default, 'asc' = 升序, 'desc' = 降序
      viewsSort: "", // '' = default, 'asc' = 升序, 'desc' = 降序
      distanceSort: "", // '' = default, 'asc' = 升序, 'desc' = 降序
    };
  },
  props: {
    cate: String,
    activeTab: String,
  },
  watch: {
    overlay_show(val) {
      this.$emit("overlay_show", val);
    },
    cate() {
      this.getTagList();
    },
  },
  components: {
    PriceScreen,
    MoreScreen,
    BrandScreen,
    CateScreen,
    ProvincesScreen,
  },
  mounted() {
    areaListApi().then((res) => {
      this.areaData = res.data?.area_list || [];
    });
    this.getTagList();
    this.getThingList();
  },
  computed: {
    getPriceSortIcon() {
      if (this.priceSort === "asc") {
        return "/static/svg/arrow-up-active.svg";
      } else if (this.priceSort === "desc") {
        return "/static/svg/arrow-down-active.svg";
      }
      return "/static/svg/arrow-down.svg";
    },
  },
  methods: {
    getThingList() {
      thingListApi().then((res) => {
        const {
          alcohol_list,
          aroma_list,
          brand_list,
          cate_list,
          pack_list,
          volume_list,
        } = res.data;
        this.brandList = brand_list || [];
        this.cateList = cate_list || [];
        this.moreList = [
          {
            title: "酒精度",
            key: "alcohol_id",
            list: alcohol_list || [],
          },
          {
            title: "香型",
            key: "aroma_id",
            list: aroma_list || [],
          },
          {
            title: "净含量",
            key: "volume_id",
            list: volume_list || [],
          },
          {
            title: "包装形式",
            key: "pack_id",
            list: pack_list || [],
          },
        ];
      });
    },
    //手动设置公寓条件
    setApartment() {
      this.moreCheckIds = [{ key: "kinds", ids: ["公寓"] }];
      this.onSubmit();
    },
    getTagList() { },
    areaChangeCheck(e) {
      this.areaCheckIds = e;
    },
    priceChangeCheck(e) {
      this.priceCheckIds = e;
    },
    cateChangeCheck(e) {
      this.cateCheckIds = e;
    },
    brandChangeCheck(e) {
      this.brandCheckIds = e;
    },
    moreChangeCheck(e) {
      this[e.key] = e.ids;
    },
    onReast() {
      this.areaCheckIds = [];
      this.priceCheckIds = [];
      this.alcohol_id = [];
      this.aroma_id = [];
      this.volume_id = [];
      this.pack_id = [];
      this.priceSort = "";
      this.viewsSort = "";
      this.distanceSort = "";
      this.cateCheckIds = [];
      this.brandCheckIds = [];
      this.$emit("onReast");
      this.overlay_show = false;
    },
    onSubmit() {
      this.$emit("onSearch", {
        area: this.areaCheckIds,
        price: this.priceSort,
        views: this.viewsSort,
        distance: this.distanceSort,
        alcohol_id: this.alcohol_id[0],
        aroma_id: this.aroma_id[0],
        volume_id: this.volume_id[0],
        pack_id: this.pack_id[0],
        cate: this.cateCheckIds,
        brand: this.brandCheckIds,
      });
      this.overlay_show = false;
    },
    handleSort(type) {
      const sortKey = type + "Sort";

      // Reset all other sort types
      const sortTypes = ["price", "views", "distance"];
      sortTypes.forEach(sortType => {
        if (sortType !== type) {
          this[sortType + "Sort"] = "";
        }
      });

      // Cycle through sort states for selected type
      if (this[sortKey] === "") {
        this[sortKey] = "asc";
      } else if (this[sortKey] === "asc") {
        this[sortKey] = "desc";
      } else {
        this[sortKey] = "";
      }

      // Close popup and trigger search
      this.overlay_show = false;
      this.$emit("onSearch", {
        area: this.areaCheckIds,
        price: this.priceSort,
        views: this.viewsSort,
        distance: this.distanceSort,
        more: this.moreCheckIds,
        cate: this.cateCheckIds,
        brand: this.brandCheckIds,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.screen-box {
  position: relative;
}

.screen {
  height: 80rpx;
  background: #ffffff;
  border: 1px solid #eee;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .text-active {
    color: $theme-color;
  }
}

.popup {
  z-index: 90999;
  position: absolute;
  top: 84rpx;
  left: 0;
  right: 0;
  // min-height: 500rpx;
  background: #ffffff;

  .popup-btns {
    height: 136rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.price-arrows {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}
</style>